Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Dash Renderer 2.0 - **Breaking Changes** #32

Closed
wants to merge 7 commits into from
Closed

Dash Renderer 2.0 - **Breaking Changes** #32

wants to merge 7 commits into from

Conversation

chriddyp
Copy link
Member

@chriddyp chriddyp commented Dec 15, 2017 •
edited
Loading

This is a work-in-progress proposal that would allow component authors to write components where any property (prop) is a Dash component, not just the children property.

This is handled by passing in a 3rd prop to the components: render. render should be used whenever a user-supplied property could be another Dash component. For example, the children property in the dash-html-components library is now rendered like:

<div>
      {this.props.render(this.props.children)}
</div>

rather than simply

<div>
      {this.props.children}
</div>

This allows the component author to allow the user to supply dash components as any property, for example, a RadioItems component could be composed like:

function RadioItems(props) {
    const {
        value,
        options,
        
        setProps,
        fireEvent,
        render
    } = props;
    return (
        <div>
            {options.map(option => (
                <label>
                    <input
                        checked={option.value === value}
                        type="radio"
                        onChange={() => {
                            this.setState({value: option.value});
                            if (setProps) setProps({value: option.value});
                            if (fireEvent) fireEvent({event: 'change'});
                        }}
                    />
                    {render(option.label)}
                </label>
            ))}
        </div>
    )
}

Notice how the label is now render(option.label). This allows the dash user to supply dash components inside their options.label property. Instead of just:

dcc.RadioItems(
    options=[
        {‘label’: ‘Item 1’, ‘value’: 1},

        {‘label’: ‘Item 2’, ‘value’: 1}
    ]
)

they could supply something like:

dcc.RadioItems(
    options=[
        {‘label’: html.Div(‘Item 1’, style={‘color’: ‘cyan’}), ‘value’: 1},

        {‘label’: ‘Item 2’, ‘value’: 1}
    ]
)

This will allow a whole new level of customizability across all Dash components.

However, this introduces a 🆘breaking change 🆘. All of the component libraries will need to be upgraded to support this version of dash-renderer. Third-party component libraries will break if the user upgrades their dash-renderer. I’m not sure if there is a way around this (feature detection).

@chriddyp chriddyp changed the title pass render to components 🆘 Breaking Change 🆘 Dash Renderer 2.0 🆘 Dec 15, 2017
@chriddyp chriddyp changed the title 🆘 Breaking Change 🆘 Dash Renderer 2.0 🆘 Dash Renderer 2.0 - **Breaking Changes** Dec 15, 2017
This was referenced Dec 15, 2017
Closed
Closed
Closed
@chriddyp
Copy link
Member Author

Prerelease versions are available with this code

pip install dash-core-components==0.16.0rc1
pip install dash-html-components==0.9.0rc1
pip install dash-renderer==0.13.0rc2
pip install dash-table-experiments==0.6.0rc1

@chriddyp
v0.13.0rc2
8e0df59
@chriddyp
🆘 crawl everything
1fee447 
since components can be inside any property now (e.g. inside
`options[3].label`, we have to crawl the entire layout object, not just
recurse through the `children` tree.
we may be able to improve this performance by allowing component
authors to specify which of their prop types accept components.
@chriddyp
update tests to use prerelease compatible components
02e1c47
@chriddyp chriddyp mentioned this pull request Dec 18, 2017
Closed
@chriddyp
Copy link
Member Author

😌 CircleCI tests are passing!

@chriddyp
Copy link
Member Author

Getting some errors while trying to use these libraries in the dash-docs
image

@r-chris
Copy link

r-chris commented Apr 25, 2018

Any update on the time-line / stability of this to move forward?

We are ultimately interested in getting this: plotly/dash-table-experiments#11 (comment) to work down the track, so that this can become true: https://twitter.com/chriddyp/status/920146214062043136 ;)

Thanks by the way for this amazing project - we just started to switch from another plotting library a few months ago and it rocks!

@chriddyp chriddyp mentioned this pull request Jun 22, 2018
Merged
@tcbegley
Copy link

tcbegley commented Sep 3, 2018

hey @chriddyp, any idea how long it might be until this gets merged? Is there anything we could do to help you get it over the line?

@chriddyp
Copy link
Member Author

chriddyp commented Sep 3, 2018

Any idea how long it might be until this gets merged

This PR was experimental and it ends up affecting a huge part of the code base. We'll get there, but probably not for another few months at least. For now, we're focusing on improving the current state of the library through a few other projects: https://github.com/orgs/plotly/projects. Once those wind down, we'll have some more bandwidth to tackle these deeper architectural changes.

@tcbegley
Copy link

tcbegley commented Sep 4, 2018

Cool, thanks for the update. The projects look great. Thanks for all your work on Dash, it’s an awesome library.

@tcbegley tcbegley mentioned this pull request Dec 13, 2018
Closed
@alexcjohnson
Copy link
Collaborator

This PR is stale. #92 - which itself still needs a bunch more work - is the continuation of these ideas.

@alexcjohnson alexcjohnson deleted the components-as-props branch February 27, 2019 22:20
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@chriddyp @r-chris @tcbegley @alexcjohnson